/**
 * 页面统计功能使用示例
 * 展示如何在页面组件中使用页面访问统计功能
 */

import { PageStats, usePageStats } from './pageStats';

// 示例1: 在页面组件中使用 Hook
export function usePageStatsExample() {
  const { recordVisit, getStats, getVisitCount } = usePageStats();
  
  // 手动记录页面访问（通常不需要，因为 app.ts 中已经自动记录）
  const handlePageVisit = (pagePath: string) => {
    recordVisit(pagePath);
  };
  
  // 获取当前页面的访问次数
  const getCurrentPageCount = () => {
    const currentPath = '/pages/example/index'; // 当前页面路径
    return getVisitCount(currentPath);
  };
  
  // 获取所有统计数据
  const getAllStats = () => {
    return getStats();
  };
  
  return {
    handlePageVisit,
    getCurrentPageCount,
    getAllStats
  };
}

// 示例2: 直接使用 PageStats 类
export function directPageStatsExample() {
  // 记录页面访问
  PageStats.recordPageVisit('/pages/example/index');
  
  // 获取统计数据
  const stats = PageStats.getPageStats();
  console.log('页面访问统计:', stats);
  
  // 获取特定页面访问次数
  const count = PageStats.getPageVisitCount('/pages/example/index');
  console.log('当前页面访问次数:', count);
  
  // 获取访问最多的页面
  const topPages = PageStats.getTopVisitedPages(5);
  console.log('访问最多的5个页面:', topPages);
  
  // 获取总访问次数
  const totalVisits = PageStats.getTotalVisits();
  console.log('总访问次数:', totalVisits);
}

// 示例3: 在 Vue 组件中的使用方式
export const vueComponentExample = `
<template>
  <view class="page-stats-demo">
    <view class="stats-info">
      <text>当前页面访问次数: {{ currentPageCount }}</text>
      <text>总访问次数: {{ totalVisits }}</text>
    </view>
    <button @click="showStats">显示统计数据</button>
    <button @click="clearStats">清除统计数据</button>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { PageStats, usePageStats } from '@/utils/pageStats';

const { getVisitCount, getTotalVisits, clearStats } = usePageStats();
const currentPageCount = ref(0);
const totalVisits = ref(0);

onMounted(() => {
  // 获取当前页面访问次数
  currentPageCount.value = getVisitCount('/pages/example/index');
  totalVisits.value = getTotalVisits();
});

const showStats = () => {
  const stats = PageStats.getPageStats();
  console.log('页面访问统计:', stats);
  
  // 显示访问最多的页面
  const topPages = PageStats.getTopVisitedPages(10);
  console.log('访问最多的页面:', topPages);
};

const clearStats = () => {
  PageStats.clearPageStats();
  currentPageCount.value = 0;
  totalVisits.value = 0;
  console.log('统计数据已清除');
};
</script>
`;

// 示例4: 数据格式说明
export const dataFormatExample = {
  description: '页面访问统计数据格式',
  example: {
    '/pages/index/index': 5,
    '/pinggu/index': 3,
    '/pages/health/index': 4,
    '/pages/info/demographic/index': 2,
    '/pages/historys/past-medical/list': 1
  },
  explanation: '键为页面路径，值为访问次数'
};
